const arr = [
    {id:1,name:'张三',sex:'男',age:18,city:'北京'},
    {id:2,name:'李四',sex:'女',age:19,city:'上海'},
    {id:3,name:'王五',sex:'男',age:20,city:'广州'},
    {id:4,name:'赵六',sex:'女',age:21,city:'重庆'},
    {id:5,name:'刘七',sex:'保密',age:22,city:'天津'},
];
window.localStorage.information = JSON.stringify(arr);
// 动态生成
setPage();
let index='';
// 增加用户
$('[name="add"]').click(function(){
    let sex='';
    $('.add').find('[name="sex"]').each((index,item)=>{
           if(item.checked===true){
              sex =item.value;
           }
    })
    let city=$('.add').find('select option:selected').text();
  arr.push({id:arr.length+1,name:$('.add>input:first-of-type').val(),sex:sex,age:$('.add').find('[name="age"]').val(),city:city}) ; 
  window.localStorage.information = JSON.stringify(arr);
  setPage();
})

// 取消增加
$('[name="del"]').click(function(){
    $('.add').find('input').val('').prop('checked',false).parent().find('select option:selected').text('北京');
})

//    修改用户/删除用户
$('tbody').click(function(e){
if( e.target.getAttribute('name')==='update'){
    index=e.target.getAttribute('index');
    $('.zhemu').css({display:'block'});
    $('p').css({display:'block'});
    $('.change').find('[name="name"]').val(arr[index].name); 
    $('.change').find('[name="age"]').val(arr[index].age); 
    $('.change').find('[name="sex"]').each(function(index,item){
         if(item.getAttribute('value')===arr[index].sex){
            item.checked=true;
         }
    }); 
    $('.change').find('select option:selected').text(arr[index].city);
}else if( e.target.getAttribute('name')==='delete'){
    if(window.confirm('您确认删除吗')){
        index=e.target.getAttribute('index');
        arr.splice(index,1);
        window.localStorage.information = JSON.stringify(arr);
       setPage();
    }
}
})

$('[name="up"]').click(function(){
if(window.confirm('您确认要修改吗')){
    let sex='';
    $('.change').find('[name="sex"]').each((index,item)=>{
           if(item.checked===true){
              sex =item.value;
           }
    })
    let city=$('.change').find('select option:selected').text();
  arr.splice(index,1,{id:index-0+1,name:$('.change>input:first-of-type').val(),sex:sex,age:$('.change').find('[name="age"]').val(),city:city}) ; 
  window.localStorage.information = JSON.stringify(arr);
  setPage();
  $('.zhemu').css({display:'none'});
  $('p').css({display:'none'});
}else{
    return;
}
  
})
// 取消修改
$('[name="deUpdate"]').click(function(){
    $('.zhemu').css({display:'none'});
  $('p').css({display:'none'});
})


// 动态生成函数
function setPage(){
 let str="";
 if(arr.length===0){
     str=' <tr><td colspan="7">暂无数据</td></tr>';
     $('tbody').html(str);
    return;
 }
  arr.forEach((item,index)=>{
     str+=`
     <tr>
    <td>${item.id}</td>
    <td>${item.name}</td>
    <td>${item.sex}</td>
    <td>${item.age}</td>
    <td>${item.city}</td>
    <td><button name="delete"  index="${index}">删除</button></td>
    <td><button name="update" index="${index}">修改</button></td>
</tr> 
     
     `
     $('tbody').html(str);

  })

}  
